<template>
  <div class="interactive-component" ref="interactivebox">
    <div @click="$emit('like')">
      <Icon :type=" user_to_this.like==1 ? 'md-heart':'md-heart-outline' " 
      :class=" user_to_this.like==1 ? 'md-heart':'md-heart-outline'"  />
      
    </div>
    <div  v-show="isblock" @click="$emit('comment')"><Icon type="ios-chatboxes-outline" /></div>

    <div @click="$emit('collect')">
      <Icon :type="user_to_this.collect==1 ?   'ios-bookmark-outline':'ios-bookmark'"
      :class="user_to_this.collect==1 ?  'ios-bookmark-outline':'ios-bookmark' " />
    </div>
    <div v-show="!isblock" @click="$emit('reply')">
        <Icon type="ios-chatbubbles-outline" />
    </div>
    <div v-show="!isblock" @click="$emit('block')">
        <Icon type="ios-log-out" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, onMounted, ref } from 'vue';
let interactivebox = ref(null)
const props = defineProps({
  user_to_this: {
    type: Object,
    required: true
  },
  isblock:{
    type:Boolean,
    required:true
  },
  direction:{
    type: String,
    default:'column'
  },
})
onMounted(()=>{
  interactivebox.value.style.flexDirection =props.direction
  console.log()
})
</script>

<style scoped>
.interactive-component {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.interactive-component>div {
  padding: 10px 10px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  width: 50px;
  margin-right: 20px;
  text-align: left;
  padding-left: 15px;
  transition: background-color 0.3s;
}

.interactive-component>div:hover {
  background-color: #f0f0f0;
}
.md-heart-outline{
  color:#c5c8ce;  
  
}
.md-heart{
  color: red;
}

.ios-bookmark{
  color: #c5c8ce;
}
.ios-bookmark-outline{
  color: orange;
}
</style>